<template>
  <div class="page">
    <sub-header :title="headerTitle"></sub-header>
    <order-tabs :status="status"></order-tabs>
    <div class='main'>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader'
import OrderTabs from 'components/OrderTabs'

export default {
  name: 'my-order',
  data () {
    return {
      status: this.$route.query.status ? this.$route.query.status : 'all',
      headerTitle: '全部订单'
    }
  },
  components: {
    SubHeader,
    OrderTabs
  },
  methods: {
    getTitle () {
      switch (this.status) {
        case 'all':
          this.headerTitle = '全部订单'
          document.title = this.headerTitle
          break
        case '0':
          this.headerTitle = '待付款'
          document.title = this.headerTitle
          break
        case '1':
          this.headerTitle = '待收货'
          document.title = this.headerTitle
          break
        case '2':
          this.headerTitle = '待评价'
          document.title = this.headerTitle
          break
        default:
          this.headerTitle = '全部订单'
          document.title = this.headerTitle
          break
      }
    }
  },
  mounted () {
    this.getTitle()
  },
  beforeRouteUpdate (to, from, next) {
    this.status = to.query.status
    this.getTitle()
    next()
  }
}
</script>

<style scoped>
  .page {
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
  }
  .main {
    width: 100%;
    padding-top: 1.9rem;
  }
</style>
